<template>
  <div class="tops">
    <vue-slick-carousel v-bind="settings">
      <div class="content">
        <div>
          <span>The OASIS system aims to develop a scholarly mapping platform with practical applications using a combination of advanced software engineering techniques and empirical software engineering knowledge that can effectively handle multiple sources of data and provide functions such as researcher profiling, researcher partnership prediction, and reviewer recommendations.</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span>南京大学，永远滴神！</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span>本项目负责人<br/>罗名胜 | 徐志乐 | 范也 | 安皓</span>
        </div>
      </div>
    </vue-slick-carousel>
  </div>
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel';
import 'vue-slick-carousel/dist/vue-slick-carousel.css';
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';

export default {
  name: "Tops",

  props: {

  },
  data() {
    return {
      settings: {
        "arrows": false,
        "dots": false,
        "adaptiveHeight": true,
        "autoplay": true,
        "autoplaySpeed": 4000,
      }
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {
    VueSlickCarousel
  },
};
</script>

<style scoped lang="scss">
  .tops {

    div {
      &.content {
        div {
          background: rgba($color: #464646, $alpha: 0.8);
          margin: 0 30px;
          padding: 10px;
          border-radius: 5px;
          border: 2px solid #464646;
          text-align: center;

          span{
            display: inline-block;
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  .slick-list{
    transition: height ease-in-out .4s;
  }
</style>